<script setup lang="ts">
import { ref, watch } from "vue";
import { getToken } from "@/utils/auth";
import UploadFile from "@iconify-icons/ep/upload-filled";

const props = defineProps({
  modelValue: {
    type: Array<string>,
    default: [] as Array<string>,
    required: true
  },
  dowURL: {
    type: String,
    default: "/excel/门店导入模板.xlsx",
    required: true
  }
});

const emit = defineEmits(["update:modelValue"]);

const fileList = ref();

watch(
  () => fileList.value,
  (newVal: string[]) => {
    if (newVal.length) {
      emit("update:modelValue", newVal);
    }
  }
);

const downTemp = () => {
  window.open(props.dowURL, "_blank");
};
</script>

<template>
  <el-upload
    ref="uploadRef"
    v-model:file-list="fileList"
    :headers="{ accessToken: getToken() }"
    :limit="1"
    accept=".xlsx, .xls"
    action="no"
    :auto-upload="false"
    drag
    style="width: 100%"
  >
    <el-icon class="el-icon--upload">
      <IconifyIconOffline :icon="UploadFile" />
    </el-icon>
    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
    <template #tip>
      <div class="el-upload__tip">
        <span>仅允许导入xls、xlsx格式文件。</span>
        <el-link
          type="primary"
          :underline="false"
          style="font-size: 12px; vertical-align: baseline"
          @click="downTemp"
          >下载模板</el-link
        >
      </div>
    </template>
  </el-upload>
</template>

<style lang="scss" scoped></style>
